<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情页</title>
    <#include "/header.html">
</head>
<body>
    <div class="outer" id="app">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/modules/senic/senicuserview.html" style="display: flex; align-items: center;">
                <img alt="Brand" src="/statics/img/icon.png" height="30px">
                <div id="siteTitle">&nbsp;协游网</div>
            </a>
        </div>
        <div style="float: right;">
            <a v-if="authStatus" class="navbar-brand" href="../../login.html">
                登录
            </a>
            <a v-else class="navbar-brand" href="../../logout">
                退出登录
            </a>
        </div>
        <div style="float: right;">
            <a class="navbar-brand" href="./senicuserhome.html">
                个人中心
            </a>
        </div>
        </div>
    </nav>
    <div class="container mainter">
        <div class="row" style="border-radius: 10px;background-color: white;">
            <div class="col-md-6">
                <img :src="senicInfo.senicImg" alt="" height="360px" width="100%">
            </div>
            <div class="col-md-6">
                <div><h1>{{senicInfo.senicName}}</h1></div><br>
                <p><b>评分:</b> {{senicInfo.senicScore}}</p>
                <p><b>票价:</b> {{senicInfo.senicPrice}}</p>
                <p><b>地址:</b> {{senicInfo.senicPlace}}</p>
                <p><b>简介:</b> {{senicInfo.senicIntro}}</p>
            </div>
        </div>
        <div class="row" style="border-radius: 10px;background-color: white;margin-top: 10px;">
            <div class="col-md-12"><h2>用户评价</h2></div>            
            <div class="col-md-12">
                <div v-for="item in scoreList" class="row" style="display: flex;align-items: center;border-bottom: #a3a1a1 1px solid;">
                    <div class="col-md-2"> <Img src="/statics/img/icon.png" style="border-radius: 60%;"></Img><b>&nbsp;{{item.userName}}&nbsp;:</b></div>
                    <div class="col-md-8">{{ item.senicEvaluate}}</div>
                    <div class="col-md-2">
                        <p>评分 {{ item.senicScore }}</p> 
                        <p>{{ getTime(item.createTime) }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="border-radius: 10px;background-color: white;margin-top: 10px;">
            <div class="col-md-12"><h2>编辑评论</h2></div>
            <div class="col-md-8">
                <input v-model="newSenicScore.senicEvaluate" type="text" class="form-control" placeholder="评论内容">
            </div>
            <div class="col-md-3">
                <input v-model="newSenicScore.senicScore" type="number" max="5" min="0" class="form-control" placeholder="请评分:5~0" step="0.1">
            </div>
            <div class="col-md-1"><a class="btn btn-default" @click="remakSenic">评论</a></div>
        </div>
    </div>
    </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data:{
    index: '1',
    senicInfo: {},
    senicinfoList: [],
    newSenicScore: {
        senicId: '',
        senicEvaluate: '',
        senicScore: '',
    },
    authStatus:false,
    senicRecomList: [],
    scoreList:[],
    searchParams: {
        senicPlace: '',
        senicName: ''
    },
    senicPlaceList:[]
    },
    mounted:function() {

        var params = window.location.search
        if(params.split("=")[1] != undefined){
            this.index = params.split("=")[1]
            this.getSenicDetailInfo(this.index)
            this.getSenicScoreInfo(this.index)
        }else{
        this.getSenicDetailInfo(this.index)
        }
    },
    watch:{
        "newSenicScore.senicScore":function(newKey, oldKey) {
            if(newKey > 5){
                alert("5分已经最多啦！！")
                this.newSenicScore.senicScore = oldKey;
            }
        }
    },
    methods:{
    getSenicDetailInfo:function(index){
        baseURL = "../../"
        $.get(baseURL + "senic/senicinfo/info/"+ index, function(r){
            vm.senicInfo = r.senicInfo;
            vm.newSenicScore.senicId = r.senicInfo.id
            console.log(vm.newSenicScore)
        });
    },
    getSenicScoreInfo:function(index){
        baseURL = "../../"
        $.get(baseURL + "senic/senicscores/scorelist/"+ index, function(r){

            vm.scoreList = r.senicScoresInfo;
            console.log(r)
        });
    },
    remakSenic:function(){
        var url = baseURL + "senic/senicscores/save/";
        if(vm.newSenicScore.senicEvaluate === ''){
            alert("评论内容不能为空")
            return
        }
        if(vm.newSenicScore.senicScore === ''){
            alert("评分不能为空")
            return
        }
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json",
            data: JSON.stringify(vm.newSenicScore),
            success: function(r){
                if(r.code === 0){
                    // vm.senicinfoList = r.searchList
                    alert("评论成功",function(){
                        location.reload()
                    })
                }else{
                    alert(r.msg);
                }
            }
        });
    },
    getTime:function (value){
        var date=new Date(parseInt(value));
        let localTime = date.toLocaleDateString()
        return localTime
    }
    }
})
</script>
<style>
    html,body,.outer {
        margin: 0px;
        height: 100%;
        background-color: #121212;
    }
    .row {
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
    }
</style>
</html>